<template>
  <div class="alert">
    <div class="rightalert"  v-bind:style="styleObject">
      <span class="closed" @click="closeda">关闭</span>
   
    <p  @click="seelist">您有 <span class="redt">{{counts}}</span> 份药单未处理</p>
    </div>
     <div v-show="mid" class="alertlist">
       <span  class="closed"  @click="midmethods">
         关闭
       </span>
       <!-- <div class="titdraus">
                <span>药品名称：</span><span>数量</span><span>单价</span><span>用法</span><span>状态</span>
            </div> -->
        <ul class="midcon">
          <li v-for="(item,index) in drugs">
            <p>
             <b> 病号：{{item.patient.name}}</b> <b>时间：{{item.patient.create_time}}</b><b><span  v-if="item.patient.status=='已取药'" class="blue">{{item.patient.status}}</span>
               <span  v-else class="red">未取药</span></b>{{index}}
               <!-- {{item.patient.patient_recipe_id}} -->
              
            </p>
               <div class="titdraus">
                <span>药品名称：</span><span>数量</span><span>用法</span><span>单价</span><span>合计</span>
            </div>
              <ul class="list" v-for="ite in item.drug">
                  <li>
                   {{ ite.drug_name}}
                  </li>
                   <li>
                     {{ ite.num}}
                  </li>
                   <li>
                     {{ ite.yfyl}}
                  </li>
                   <li>
                   {{ ite.price}}
                  </li>
                 
                  <li>
                     {{ite.price*ite.num}}
                     
                  </li>
              </ul>
              <button class="btn" v-show="item.patient.status=='未取药'" @click="surebtn(item.patient.patient_recipe_id,item.drug)">
                 确定取药
              </button>
          </li>
        </ul>
  </div>
   </div>
</template>
<script>
export default {
  name: "alert",
  data() {
    return {
      msg: "", //右下角订单的数量
      styleObject: {
        //右下角的样式绑定
        bottom: "0",
        transition: "0.8s"
      },
      mid: false,
      drugs: []
    };
  },
  computed:{
      counts () {
        return this.$store.state.count
      } 
  },
  created() {
    if (this.$store.state.count > 0) {
      this.styleObject.bottom = "0px";
      this.getnum();
    }
  },
  mounted() {
    this.$nextTick(function() {
      this.getnum();
    });
  },
  methods: {
    getnum() {
      //     let params = new URLSearchParams();
      // params.append("id", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);
      this.$http
        .post(
          "http://medical.qingguo188.com/user-patient/showundealrecipe",
          {
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
            if (rester.data.status == 1) {
              this.drugs=[];
              if (rester.data.$message.length > 0) {
                this.msg = rester.data.$message.length;
                this.$store.state.count = this.msg
                this.styleObject.bottom = "0";
                for (let i = 0; i < rester.data.$message.length; i++) {
                  this.drugs.push(rester.data.$message[i]);
                }
                console.log(this.drugs);
              } else {
                this.msg = 0;
                this.$store.state.count = 0
                this.styleObject.bottom = "-130px";
              }
            }
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    surebtn(patient_recipe_id, arr) {
      //确定取药
      //    let params = new URLSearchParams();
      //    params.append("patient_recipe_id", patient_recipe_id);
      // params.append("id", JSON.parse(localStorage.user).userid);
      // params.append("level", JSON.parse(localStorage.user).level);
      //  params.append("arr",JSON.stringify(arr));
      this.$http
        .post(
          "http://medical.qingguo188.com/user-patient/confirmpatientdrug",
          {
            patient_recipe_id: patient_recipe_id,
            id: JSON.parse(localStorage.user).userid,
            level: JSON.parse(localStorage.user).level,
            arr: JSON.stringify(arr)
          },
          {
            headers: {
              "Content-Type": "application/x-www-form-urlencoded"
            }
          }
        )
        .then(
          rester => {
                if(this.drugs.length==1){
                  this.mid = false;
                }

            this.getnum();
          },
          function() {
            //this.$layer.alert("网络错误！");
          }
        );
    },
    closeda() {
      this.styleObject.bottom = "-130px";
    },
    seelist() {
      if (this.msg <= 0) {
        this.styleObject.bottom = "-130px";
      } else {
        //this.msg--;
        this.mid = true;
      }
    },
    midmethods() {
      this.mid = false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
b {
  margin-right: 20px;
}
.red {
  color: red;
}
.blue {
  color: green;
}
.midcon {
  overflow: hidden;
  margin-top: 20px;
}
.titdraus {
  width: 800px;
  height: 30px;
  border-bottom: 1px solid #cccccc;
}
.list {
  overflow: hidden;
  width: 800px;
}
.midcon > li {
  border: 1px solid #f1f1f1;
  padding-bottom: 20px;
  text-align: center;
}
.titdraus span {
  text-align: center;
  display: inline-block;
  width: 20%;
  height: 30px;
  line-height: 30px;
}
.list li {
  width: 20%;
  float: left;
  color: #333333;
  height: 30px;
  line-height: 30px;
  border-bottom: 1px solid #f1f1f1;
}
.midcon button {
  display: inline-block;
  margin-top: 10px;
}
.midcon > li > p {
  text-align: center;
  height: 30px;
  line-height: 30px;
  background: #dedede;
}
.redt {
  font-size: 20px;
  color: red;
  vertical-align: middle;
}
.rightalert {
  position: fixed;
  right: 0px;
  width: 300px;
  height: 100px;
  padding: 10px;
  bottom: 0px;
  background: #dedede;
  text-align: center;
}
.rightalert p {
  color: blue;
  line-height: 100px;
  cursor: pointer;
}
.rightalert p:hover {
  color: red;
}
.closed {
  position: absolute;
  right: 10px;
  top: 10px;
  color: #333333;
  line-height: 1;
  cursor: pointer;
}
.isActive {
  font-size: 30px;
}
.alertlist {
  position: absolute;
  width: 800px;
  height: 400px;
  left: 50%;
  margin-left: -400px;
  top: 20%;
  background: #ffffff;
  padding: 10px;
  overflow-y: auto;
}
.midcon li p {
  text-align: left;
  padding: 0 20px;
}
</style>
